﻿@import "_reset.less";

body,html{
    padding:0;
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    -webkit-user-select:none;
    overflow: hidden;
}

.g-wrap{
    width:100%;
    height:100%;
    overflow: hidden;
    .first-page{
        // display:none;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10;
        background-color: #fbf7f5;
        top:0;
        left:0;
        background: url(../img/phone.jpg) 0 0  no-repeat;
        background-size:100% auto;
        .phone-top{
            display: none;
            position: absolute;
            top: 0;
            width: 100%;
            height: 1.4rem;
            background: url(../img/phone-tip.jpg) 0 0  no-repeat;
            background-size:100% 100%;
        }
        .phone-top.active{
            display: block;
            -webkit-animation: 0.4s slideDown ease-in;
        }
        .hand{
            display: none;
            width: 1.34rem;
            height: 1.31rem;
            position: absolute;
            right: 0.35rem;
            top:0.95rem;
            background: url(../img/hand.png) 0 0  no-repeat;
            background-size:100%;
            -webkit-animation: 0.4s hand ease-in alternate infinite;
        }
        .phone-btns{
            width: 100%;
            height: 1.92rem;
            position: absolute;
            bottom: 0;
            left: 0;
            background: url(../img/phone-btns.jpg) 0 0  no-repeat;
            background-size:100%;
        }
    }
    .load-mark{
        display:none;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10;
        background-color: #fbf7f5;
        top:0;
        left:0;
        background: url(../img/load-bg.jpg) 0 0  no-repeat;
        background-size:100%;
        .load-icon2{
            position: absolute;
            bottom: 2.13rem;
            left: 3.2rem;
            width: 1.09rem;
            height: 0.92rem;
            background: url(../img/load-icon2.png) 0 bottom  no-repeat;
            background-size:100%;
            // -webkit-animation: 0.6s jump ease-in alternate infinite;
            -webkit-animation: 0.4s jumpU ease-in alternate infinite;
        }
        .load-icon1{
            position: absolute;
            bottom: 1.83rem;
            left: 3.3rem;
            width: 0.91rem;
            height: 0.17rem;
            background: url(../img/load-icon1.png) 0 bottom  no-repeat;
            background-size:100%;
            -webkit-animation: 0.4s jumpD ease-in alternate infinite;
        }
        i{
            font-style: normal;
            position: absolute;
            color: white;
            font-size: .26rem;
            font-weight: bold;
            bottom: 1.3rem;
            display: block;
            width: 100%;
            text-align: center;
        }
        .btn{
            display: none;
            color: white;
            border: 1px solid #f0c17e;
            font-size: 0.3rem;
            width: 3rem;
            text-align: center;
            line-height: 0.6rem;
            position: absolute;
            bottom: 0rem;
            margin: 1rem 2.2rem;
            background-color: #917f36;
        }

    }
    .page{
        // display:none;
        position: absolute;
        width:100%;
        height:100%;
        overflow: hidden;
        #framesBox{
            width:100%;
            height:100%;
            video{
                object-fit: fill;
                -webkit-object-fit: fill;
                position: absolute;
                top: 0;
                left: 0;
            }
            #video2{
                display: none;
            }
            // -webkit-transform-origin: 0 0 0;
            // transform-origin: 0 0 0;

        }
    }
    .phone{
        display:none;
        width:100%;
        height:100%;
        background-color:#eff0eb;
        position: absolute;
        top: 0;
        left: 0;
        .phone-head{
            position:absolute;
            top:0.1rem;
            width:100%;
            height:0.22rem;
            background: url(../img/phone-head.png) center center  no-repeat;
            background-size: auto 100%;

        }
        .bottab{
            position:absolute;
            bottom:0.1rem;
            width:100%;
            height:0.79rem;
            background: url(../img/bottab.png) center center  no-repeat;
            background-size: auto 100%;
        }
        @left:2;
        @top:1.6;
        @toTop:2.1;
        .kbtn{
            width:1.38rem;
            height:1.38rem;
            position:absolute;
        }
        #num1{
            background: url("../img/num1.png") no-repeat;
            background-size: 100%;
            left: (1 + @left * 0 ) * 1rem;
            top: (@toTop + @top * 0 ) * 1rem;
            // height: 1.435rem;
        }
        #num2{
            background: url("../img/num2.png") no-repeat;
            background-size: 100%;
            left: (1 + @left * 1 ) * 1rem;
            top: (@toTop + @top * 0 ) * 1rem;
            height:1.385rem;
        }
        #num3{
            background: url("../img/num3.png") no-repeat;
            background-size: 100%;
            left: (1 + @left * 2 ) * 1rem;
            top: (@toTop + @top * 0 ) * 1rem;
            // height: 1.435rem;
        }
        #num4{
            background: url("../img/num4.png") no-repeat;
            background-size: 100%;
            left: (1 + @left * 0 ) * 1rem;
            top: (@toTop + @top * 1 ) * 1rem;
        }
        #num5{
            background: url("../img/num5.png") no-repeat;
            background-size: 100%;
            left: (1 + @left * 1 ) * 1rem;
            top: (@toTop + @top * 1 ) * 1rem;
            // height: 1.45rem;
        }
        #num6{
            background: url("../img/num6.png") no-repeat;
            background-size: 100%;
            left: (1 + @left * 2 ) * 1rem;
            top: (@toTop + @top * 1 ) * 1rem;
        }
        #num7{
            background: url("../img/num7.png") no-repeat;
            background-size: 100%;
            left: (1 + @left * 0 ) * 1rem;
            top: (@toTop + @top * 2 ) * 1rem;
            // height: 1.43rem;
            height: 1.37rem;
        }
        #num8{
            background: url("../img/num8.png") no-repeat;
            background-size: 100%;
            left: (1 + @left * 1 ) * 1rem;
            top: (@toTop + @top * 2 ) * 1rem;
        }
        #num9{
            background: url("../img/num9.png") no-repeat;
            background-size: 100%;
            left: (1 + @left * 2 ) * 1rem;
            top: (@toTop + @top * 2 ) * 1rem;
            // height: 1.43rem;
            height: 1.37rem;
        }
        #numn{
            background: url("../img/numn.png") no-repeat;
            background-size: 100%;
            left: (1 + @left * 0 ) * 1rem;
            top: (@toTop + @top * 3 ) * 1rem;
        }
        #num0{
            background: url("../img/num0.png") no-repeat;
            background-size: 100%;
            left: (1 + @left * 1 ) * 1rem;
            top: (@toTop + @top * 3 ) * 1rem;
        }
        #numx{
            background: url("../img/numx.png") no-repeat;
            background-size: 100%;
            left: (1 + @left * 2 ) * 1rem;
            top: (@toTop + @top * 3 ) * 1rem;
        }
        #phoneBtn{
            background: url("../img/phoneBtn.png") no-repeat;
            background-size: 100%;
            left: (1 + @left * 1 ) * 1rem;
            // top: (@toTop + @top * 4 ) * 1rem;
            // height: 1.45rem;
            top: 8.5rem;
        }
        #addBtn{
            display:none;
            position:absolute;
            background: url("../img/add.png") no-repeat;
            width:0.35rem;
            height:0.35rem;
            background-size: 100%;
            top: 0.7rem;
            left: 0.5rem;
        }
        #delBtn{
            display:none;
            position:absolute;
            background: url("../img/del.png") no-repeat;
            width:0.38rem;
            height:0.30rem;
            background-size: 100%;
            top: 0.7rem;
            right: 0.5rem;
        }
        #phoneTxt{
            position: absolute;
            width: 100%;
            text-align: center;
            left: 0;
            top: 0.4rem;
            font-size: 0.66rem;
            -webkit-transform: translate3d(0, 0, 0);
            color: #000000;
        }
        .poptips{
            position: absolute;
            width: 4rem;
            background: rgba(0, 0, 0, 0.8);
            color: #ffffff;
            font-size: 0.36rem;
            text-align: center;
            padding: 0.3rem;
            left: 1.4rem;
            top: 5rem;
            z-index: 220;
            display:none;
            pointer-events: none;
            border-radius: 0.3rem;
        }
        .poptips.showTip{
            display:block;
            -webkit-animation: 0.3s tipsShow ease-out;
        }
        .tips1{
            position:absolute;
            width:4.62rem;
            height:1.14rem;
            background: url("../img/tips1.png") no-repeat;
            background-size: 100%;
            top: 1.05rem;
            left: 1.5rem;
            font-size: 0.24rem;
            text-align: center;
            color: #f1f1f1;
            padding: 0 0.3rem 0 0.9rem;
            box-sizing: border-box;
        }
        .tips2{
            position:absolute;
            width:3.36rem;
            height:1.01rem;
            background: url("../img/tips2.png") no-repeat;
            background-size: 100%;
            left: 0.25rem;
            top: 1.1rem;
            display:none;
        }
    }
    .phone-call{
        display:none;
        width:100%;
        height:100%;
        background: url("../img/bg.jpg") no-repeat;
        background-size: 100% auto;
        position: absolute;
        top: 0;
        left: 0;
        .phone-num{
            color: white;
            font-size: 0.6rem;
            text-align: center;
            position: relative;
            top: 0.48rem;
        }
        .time{
            position: relative;
            top: 0.9rem;
            color: white;
            font-size: 0.32rem;
            text-align: center;
        }
        .icons{
            width: 4.4rem;
            height: 3.44rem;
            position: absolute;
            bottom: 0.6rem;
            background: url("../img/bot.png") no-repeat;
            background-size: 100%;
            left: 1.45rem;
        }
        .startBtn{
            width: 1.44rem;
            height: 1.44rem;
            background: url("../img/phoneBtn.png") no-repeat;
            background-size: 100%;
            position: absolute;
            bottom: 1.1rem;
            right: 1.2rem;
            -webkit-animation: rtAni 0.8s ease-out infinite;
        }
        .endBtn{
            width: 1.44rem;
            height: 1.44rem;
            background: url("../img/endBtn.png") no-repeat;
            background-size: 100%;
            position: absolute;
            bottom: 1.1rem;
            left: 1.2rem;
        }
        .poptips{
            position: absolute;
            width: 4rem;
            background: rgba(0, 0, 0, 0.8);
            color: #ffffff;
            font-size: 0.36rem;
            text-align: center;
            padding: 0.3rem;
            left: 1.4rem;
            top: 6.5rem;
            z-index: 220;
            display:none;
            pointer-events: none;
            border-radius: 0.3rem;
        }
        .poptips.showTip{
            display:block;
            -webkit-animation: 0.3s tipsShow ease-out;
        }
    }
    .active{
        .phone-bg{
            width: 5.6rem;
            height: 4.32rem;
            background: url("../img/phone-bg.png") no-repeat;
            background-size: 100%;
            position: absolute;
            top: 3.8rem;
            left: 0.9rem;
            -webkit-animation: tipsShow 0.3s ease-in both;
        }
        .icons{
            -webkit-animation: hide 0.3s ease-in both;
        }
        .endBtn{
            -webkit-animation: mvRight 0.5s ease-out both;
        }
        .startBtn{
            -webkit-animation: hide 0.3s ease-in both;
        }
    }
    .over{
        .phone-bg{
            opacity: 0.5;
            -webkit-animation: none;
        }
        .endBtn{
            opacity: 0.5;
            -webkit-animation: none;
            -webkit-transform:translate3d(1.8rem,0,0);
        }
    }
    .last-page{
        display:none;
        width:100%;
        height:100%;
        min-height: 12rem;
        background: url("../img/last-page-bg.jpg") no-repeat;
        background-size: 100%;
        position: absolute;
        top: 0;
        left: 0;

        .yuyue-link {
            display: block;
            position:absolute;
            width:3.29rem;
            height:1.11rem;
            left: 2.2rem;
            top: 10.48rem;
            background: url("../img/yuyue.png") no-repeat;
            background-size: 100%;
        }
    }
}
@-webkit-keyframes mvRight {
  0% {
    -webkit-transform:translate3d(0,0,0);
  }
  100% {
    -webkit-transform:translate3d(1.8rem,0,0);
  }
}
@-webkit-keyframes tipsShow {
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
@-webkit-keyframes hide {
    0%{
        opacity:1;
    }
    100%{
        opacity:0;
    }
}

@-webkit-keyframes slideDown {
    0%{
        -webkit-transform: translateY(-1.4rem);
    }
    100%{
        -webkit-transform: translateY(0rem);
    }
}

@-webkit-keyframes hand {
    0%{
        -webkit-transform: translateY(0.2rem);
    }
    100%{
        -webkit-transform: translateY(0rem);
    }
}
@-webkit-keyframes jumpU {
    0%{
        -webkit-transform: translateY(-0.4rem);
    }
    100%{
        -webkit-transform: translateY(0rem);
    }
}

@-webkit-keyframes jumpD {
    0%{
        -webkit-transform: translateY(0rem) scale(0.8);
    }
    100%{
        -webkit-transform: translateY(0rem);
    }
}
@-webkit-keyframes rtAni{
	0%{
		-webkit-transform:rotate(0deg) translate3d(0,0,0);
	}
	15%{
		-webkit-transform:rotate(20deg) translate3d(0,0,0);
	}
	30%{
		-webkit-transform:rotate(-10deg) translate3d(0,0,0);
	}
	45%{
		-webkit-transform:rotate(20deg) translate3d(0,0,0);
	}
	60%{
		-webkit-transform:rotate(0deg) translate3d(0,0,0);
	}
}
